<template>
  <el-row >
    <el-col :span="12" style="height:30px;margin-top:20px;">
     <el-breadcrumb separator="/">
       <el-breadcrumb-item>{{databasename}}</el-breadcrumb-item>
       <el-breadcrumb-item>{{scema}}</el-breadcrumb-item>
       <el-breadcrumb-item>{{type}}</el-breadcrumb-item>
       <el-breadcrumb-item>{{objectname}}</el-breadcrumb-item>
     </el-breadcrumb>
  　</el-col>
    <el-col :span="12" style="height:30px;">
       <el-input placeholder="请输入搜索内容" icon="search"

        v-model="searchInputValue"  @keyup.enter.native ="queryObjects()" >

      </el-input>

    </el-col>
    <el-col :span="24" >　　
    <el-card class="box-card source-wrapper">
	 <div class="highlight"  style="width:90%;height:450px">
	 <pre ><code  ref="ddlSourceContainer"></code></pre>
	 </div>
    </el-card>
    </el-col>
  </el-row>
</template>

<script>
    import Vue from 'vue';
    import {dbobjectsApi} from '../apis/dbobjects.js';
	import hljs from '../../lib/highlight.pack.js';
	import  '../../css/Common.css';
	import  '../../css/hljs.css';

    import 'element-ui/lib/theme-default/icon.css';
	import 'element-ui/lib/theme-default/breadcrumb.css';
    import {Breadcrumb ,BreadcrumbItem,Button} from 'element-ui'
    Vue.component("el-breadcrumb", Breadcrumb)
    Vue.component("el-breadcrumb-item", BreadcrumbItem)
    Vue.component(Button.name, Button)
    import 'element-ui/lib/theme-default/input.css';
    import {Input} from 'element-ui'
    Vue.component(Input.name, Input)


    export default {
        data () {
            return {
			   ddlSource :"",
			   scema:"",
			   type:"",
			   objectname:"",
			   databasename:"",
			   searchInputValue :null
            }
        },
		watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
				
                var me=this ;
                this.searchInputValue =to.query.queryString;
                this.scema =to.params.scema;
                this.type =to.params.type;
                this.objectname =to.params.objectname;

                dbobjectsApi.getObject(
			 
			         to.params.scema,
			         to.params.type,
			         to.params.objectname,
			    ).then(
                         ret =>{
                            me.ddlSource=ret.DDL
							me.$refs.ddlSourceContainer.innerHTML=
							this.replaceAllByKeyWordHighlight(hljs.highlight("sql",me.ddlSource,true).value,this.searchInputValue);
                         }
                 );


            },
            '$vnode' (to, from) {
                
            }
        },
        mounted() {
		    // hljs.initHighlightingOnLoad();//highlight初始化
		
		     //取得对象DDL
             var me=this ;
             this.searchInputValue =this.$route.query.queryString;
             this.scema =this.$route.params.scema;
             this.type =this.$route.params.type;
             this.objectname =this.$route.params.objectname;


             dbobjectsApi.getObject(
			 
			   this.$route.params.scema,
			   this.$route.params.type,
			   this.$route.params.objectname,
			 ).then(
                         ret =>{
						    me.ddlSource=ret.DDL
							me.$refs.ddlSourceContainer.innerHTML=
							this.replaceAllByKeyWordHighlight(hljs.highlight("sql",me.ddlSource,true).value,this.searchInputValue);
                         }
              );


        },
        methods:{
            queryObjects(){
                     if(this.searchInputValue!=null && this.searchInputValue!=''){
                                this.$router.push({
                                  name:"queryview",
                                  path:"/query" ,
                                  query:{queryString:this.searchInputValue}
                                });
                     }
            },
            replaceAllByKeyWord(str,reallyDo, replaceWith, ignoreCase){
                     if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
                          return str.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
                     } else {
                          return str.replace(reallyDo, replaceWith);
                     }
            },
            replaceAllByKeyWordHighlight(str,queryString){
              if(queryString!=null && queryString!='')
                return this.replaceAllByKeyWord(str ,queryString , "<span class='queryString'>"+queryString+"</span>" ,true)
              else
                return str;
            }
        }
    }
</script>

<style>
.source-wrapper{
  height:500px;
  overflow:auto !important;
}
</style>